@media(min-width:400px) {
    #top-bar {
        height: 50px;
    }
    #top-bar button {
        padding: 0px;
        margin: 0px;
        font-size: 24px;
    }
    #second-bar {
        height: 50px;
        border-top: lightgray 1px solid;
        border-bottom: lightgray 1px solid;
    }
    #second-bar #date-detail {
        height: 50px;
        text-align: center;
        vertical-align: middle;
        line-height: 50px;
        padding: 0px;
        color: gray;
        font-size: 22px;
    }
    #second-bar #buildingBtnGroup {
        height: 48px;
        padding: 0px;
        font-size: 22px;
    }
    #busyroom {
        margin: 0px;
    }
    #busyroom #title {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        height: 46px;
        padding: 10px;
    }
    #busyroom #content {
        border: lightgray 1px solid;
        border-radius: 10px;
        width: 100%;
        font-size: 20px;
        margin: 10px 0px;
        min-height: calc(45px*8);
    }
    #busyroom #content .row div {
        margin: 0px;
        padding: 0px 0px;
        font-size: 20px;
        line-height: 45px;
        vertical-align: middle;
        text-align: center;
    }
    #busyroom #content .row {
        height: 45px;
    }
    #busyroom #content .header {
        background: #eeeeee;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    #busyroom #content .item:nth-child(odd) {
        background: #ffffff;
    }
    #busyroom #content .item:nth-child(even) {
        /*background: #96ccff;*/
        background: #d2e8fc;
    }
    #busyroom .item:last-child,
    #busyroom .blank:last-child {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    #busyroom .empty div {
        border-top: lightgray 1px solid;
        vertical-align: middle;
        text-align: center;
        height: calc(45px*7) !important;
        line-height: calc(45px*7) !important;
        font-size: 30px !important;
        font-weight: bold;
        color: lightgray;
    }
}

@media(max-width:400px) {
    #top-bar {
        height: 35px;
    }
    #top-bar button {
        padding: 0px;
        margin: 0px;
        font-size: 18px;
    }
    #second-bar {
        height: 35px;
        border-top: lightgray 1px solid;
        border-bottom: lightgray 1px solid;
    }
    #second-bar #date-detail {
        height: 35px;
        text-align: center;
        vertical-align: middle;
        line-height: 33px;
        padding: 0px;
        color: gray;
    }
    #second-bar #buildingBtnGroup {
        height: 33px;
        padding: 0px;
    }
    #busyroom #title {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        min-height: 34px;
        margin: 10px;
    }
    #busyroom #content {
        border: lightgray 1px solid;
        border-radius: 10px;
        width: 100%;
        font-size: 16px;
        margin: 3px 0px;
        min-height: calc(34px*8);
    }
    #busyroom #content .row div {
        margin: 0px;
        padding: 0px 0px;
        font-size: 14px;
        line-height: 34px;
        vertical-align: middle;
        text-align: center;
    }
    #busyroom #content .row {
        height: 34px;
    }
    #busyroom #content .header {
        background: #eeeeee;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    #busyroom #content .item:nth-child(odd) {
        background: #ffffff;
    }
    #busyroom #content .item:nth-child(even) {
        /* background: #96ccff; */
        background: #d2e8fc;
    }
    #busyroom .item:last-child,
    #busyroom .blank:last-child {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    #busyroom .empty div {
        border-top: lightgray 1px solid;
        vertical-align: middle;
        text-align: center;
        height: calc(34px*7) !important;
        line-height: calc(34px*7) !important;
        font-size: 30px !important;
        font-weight: bold;
        color: lightgray;
    }
}